<template>
	<view class="goods-detail-container">
		<!-- 商品主图 -->
		<view class="goods-image-wrapper">
			<image class="goods-image" :src="goods.thumb || defaultThumb" mode="aspectFill"></image>
		</view>

		<!-- 商品信息 -->
		<view class="info-card">
			<view class="info-item">
				<text class="label">商品编号</text>
				<text class="value">{{ goods.goods_id }}</text>
			</view>
			<view class="info-item">
				<text class="label">商品名称</text>
				<text class="value">{{ goods.name }}</text>
			</view>

			<view class="info-item">
				<text class="label">品牌</text>
				<text class="value">{{ goods.brand || '暂无品牌' }}</text>
			</view>

			<view class="info-item">
				<text class="label">型号</text>
				<text class="value">{{ goods.model || '暂无信息' }}</text>
			</view>

			<view class="info-item">
				<text class="label">库存</text>
				<text class="value stock">{{ goods.remain_count || 0 }}</text>
			</view>

			<view class="info-item">
				<text class="label">上架状态</text>
				<text class="value status">{{ goods.is_on_sale ? '已上架' : '已下架' }}</text>
			</view>

			<view class="info-item">
				<text class="label">上架时间</text>
				<text class="value">{{ formatDate(goods.add_date) }}</text>
			</view>

			<view class="info-item">
				<text class="label">最后修改</text>
				<text class="value">{{ formatDate(goods.last_modify_date) }}</text>
			</view>

			<view class="info-item">
				<text class="label">描述</text>
				<text class="value desc">{{ goods.desc }}</text>
			</view>

			<view class="info-item">
				<text class="label">备注</text>
				<text class="value desc">{{ goods.note }} </text>
			</view>
		</view>
		<!-- 管理员专属编辑按钮 -->
		<view class="edit-button-container" v-if="isAdmin">
			<button class="edit-button" @tap="handleEdit">编辑</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: {},
				defaultThumb: '/static/avatar/empty.png',
				isAdmin: false // 管理员状态
			}
		},
		onLoad() {
			if (uni.$router.params?.goods) {
				this.goods = uni.$router.params.goods
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				})
				// uni.navigateBack()
			}
			// 检查管理员权限（示例逻辑，根据实际项目调整）
			this.checkAdminPermission();
		},
		methods: {
			formatDate(date) {
				if (!date) return '未知'
				return uni.$dayjs(date).format('YYYY-MM-DD HH:mm:ss')
			},
			// 检查管理员权限
			checkAdminPermission() {
				// 实际项目中应从全局状态或API获取权限信息
				// 这里使用示例逻辑：检查本地存储中的用户角色
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo && userInfo.role?.value >= 5) {
						this.isAdmin = true;
					}
				} catch (e) {
					console.error('获取用户信息失败', e);
				}
			},
			// 处理编辑操作
			handleEdit() {
				// 跳转到编辑页面，传递当前商品数据
				uni.$router.to({
					url: '/pagesA/item/goods/edit',
					params: {
						_id: this.goods._id
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.goods-detail-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	/* 商品主图容器（缩进展示） */
	.goods-image-wrapper {
		margin: 30rpx auto;
		width: 90%;
		max-width: 600rpx; // 可选：限制最大宽度
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.goods-image {
		width: 100%;
		height: 400rpx;
		border-radius: 20rpx;
		object-fit: cover;
	}

	/* 信息卡片 */
	.info-card {
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.info-item {
		display: flex;
		flex-direction: column;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}

		.label {
			font-size: 26rpx;
			color: #999;
			margin-bottom: 10rpx;
		}

		.value {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}

		.stock {
			color: #e43d33;
		}

		.status {
			color: #4caf50;
		}

		.desc {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}
	}

	/* 编辑按钮容器 */
	.edit-button-container {
		// position: fixed;
		margin-top: 40rpx;
		bottom: 40rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		padding: 0 30rpx;
		z-index: 10;

		.edit-button {
			background-color: #007aff;
			color: white;
			border-radius: 50rpx;
			font-size: 32rpx;
			height: 90rpx;
			line-height: 90rpx;
			width: 80%;
			box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.4);
			transition: all 0.3s;

			&:active {
				background-color: #0062cc;
				transform: scale(0.98);
			}
		}
	}
</style>